import { Header } from '../components/Header';
import { Footer } from '../components/Footer';
import PageHeader from '../components/PageHeader';
import { useDocumentTitle } from '../hooks/useDocumentTitle';
import { ChevronRight, FileText } from 'lucide-react';

export const TermsOfServicePage = () => {
  useDocumentTitle('Terms of Service');
  
  return (
    <div className="flex flex-col min-h-screen w-full bg-white">
      <Header />
      <main className="flex-grow">
        <PageHeader 
          title="Terms of Service"
          subtitle="Please read these terms carefully before using our services."
          icon={FileText}
        />
        {/* Breadcrumb */}
        <div className="bg-gray-50 py-3">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="flex items-center text-sm text-gray-500">
              <a href="/" className="hover:text-[#0e4c92]">
                Home
              </a>
              <ChevronRight className="h-4 w-4 mx-2" />
              <span className="text-gray-700 font-medium">
                Terms of Service
              </span>
            </div>
          </div>
        </div>
        
        {/* Content */}
        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
          <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-8 lg:p-12">
            <div className="text-center mb-12">
              <div className="inline-block bg-gray-100 text-gray-600 px-4 py-2 rounded-full text-sm font-medium">
                Last Updated: June 15, 2025
              </div>
            </div>
            
            <div className="prose prose-lg max-w-none space-y-8">
              <section className="bg-blue-50 border-l-4 border-[#0e4c92] p-6 rounded-r-lg">
                <h2 className="text-2xl font-bold text-[#0e4c92] mb-4 mt-0">1. Agreement to Terms</h2>
                <p className="text-gray-700 leading-relaxed">
                  By accessing or using MedSelectHub's website, including any other
                  media form, media channel, mobile website, or mobile application
                  related or connected to it (collectively, the "Site"), you agree
                  to be bound by these Terms of Service ("Terms"). If you do not
                  agree to these Terms, you must not access or use the Site.
                </p>
              </section>

              <section className="pt-6">
                <h2 className="text-2xl font-bold text-[#0e4c92] mb-6 pb-2 border-b border-gray-200">2. Intellectual Property Rights</h2>
                <div className="bg-gray-50 p-6 rounded-lg space-y-4">
                  <p className="text-gray-700 leading-relaxed">
                    The Site and its entire contents, features, and functionality
                    (including but not limited to all information, software, text,
                    displays, images, video, and audio, and the design, selection, and
                    arrangement thereof) are owned by MedSelectHub, its licensors, or
                    other providers of such material and are protected by copyright,
                    trademark, patent, trade secret, and other intellectual property
                    or proprietary rights laws.
                  </p>
                  <p className="text-gray-700 leading-relaxed">
                    You must not reproduce, distribute, modify, create derivative
                    works of, publicly display, publicly perform, republish, download,
                    store, or transmit any of the material on our Site, except as
                    follows:
                  </p>
                </div>
                
                <div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="flex items-start p-4 bg-green-50 border border-green-200 rounded-lg">
                    <span className="w-2 h-2 bg-green-500 rounded-full mt-2 mr-3 flex-shrink-0"></span>
                    <span className="text-gray-700">
                      Your computer may temporarily store copies of materials in RAM for viewing
                    </span>
                  </div>
                  <div className="flex items-start p-4 bg-green-50 border border-green-200 rounded-lg">
                    <span className="w-2 h-2 bg-green-500 rounded-full mt-2 mr-3 flex-shrink-0"></span>
                    <span className="text-gray-700">
                      Store files automatically cached by your browser for display enhancement
                    </span>
                  </div>
                  <div className="flex items-start p-4 bg-green-50 border border-green-200 rounded-lg">
                    <span className="w-2 h-2 bg-green-500 rounded-full mt-2 mr-3 flex-shrink-0"></span>
                    <span className="text-gray-700">
                      Print or download pages for personal, non-commercial use
                    </span>
                  </div>
                  <div className="flex items-start p-4 bg-green-50 border border-green-200 rounded-lg">
                    <span className="w-2 h-2 bg-green-500 rounded-full mt-2 mr-3 flex-shrink-0"></span>
                    <span className="text-gray-700">
                      Use social media features as enabled by the Site
                    </span>
                  </div>
                </div>
              </section>

              <section className="pt-6">
                <h2 className="text-2xl font-bold text-[#0e4c92] mb-6 pb-2 border-b border-gray-200">3. Prohibited Uses</h2>
                <p className="text-gray-700 leading-relaxed mb-6">
                  You may use the Site only for lawful purposes and in accordance
                  with these Terms. You agree not to use the Site:
                </p>
                <div className="grid grid-cols-1 gap-4">
                  <div className="border-l-4 border-red-300 bg-red-50 p-4 rounded-r-lg">
                    <p className="text-gray-700">
                      <span className="font-semibold text-red-600">❌</span> In any way that violates applicable laws or regulations
                    </p>
                  </div>
                  <div className="border-l-4 border-red-300 bg-red-50 p-4 rounded-r-lg">
                    <p className="text-gray-700">
                      <span className="font-semibold text-red-600">❌</span> To transmit advertising, promotional material, spam, or chain letters
                    </p>
                  </div>
                  <div className="border-l-4 border-red-300 bg-red-50 p-4 rounded-r-lg">
                    <p className="text-gray-700">
                      <span className="font-semibold text-red-600">❌</span> To impersonate MedSelectHub, employees, users, or other entities
                    </p>
                  </div>
                  <div className="border-l-4 border-red-300 bg-red-50 p-4 rounded-r-lg">
                    <p className="text-gray-700">
                      <span className="font-semibold text-red-600">❌</span> To restrict or inhibit others' use or expose them to liability
                    </p>
                  </div>
                </div>
              </section>

              <section className="pt-6">
                <h2 className="text-2xl font-bold text-[#0e4c92] mb-6 pb-2 border-b border-gray-200">4. User Contributions</h2>
                <div className="bg-gray-50 p-6 rounded-lg space-y-4">
                  <p className="text-gray-700 leading-relaxed">
                    The Site may contain message boards, chat rooms, personal web
                    pages or profiles, forums, bulletin boards, and other interactive
                    features that allow users to post, submit, publish, display, or
                    transmit content or materials on or through the Site.
                  </p>
                  <p className="text-gray-700 leading-relaxed">
                    Any User Contribution you post to the site will be considered
                    non-confidential and non-proprietary. By providing any User
                    Contribution on the Site, you grant us and our affiliates and
                    service providers, and each of their and our respective licensees,
                    successors, and assigns the right to use, reproduce, modify,
                    perform, display, distribute, and otherwise disclose to third
                    parties any such material.
                  </p>
                </div>
              </section>

              <section className="pt-6">
                <h2 className="text-2xl font-bold text-[#0e4c92] mb-6 pb-2 border-b border-gray-200">5. Content Standards</h2>
                <p className="text-gray-700 leading-relaxed mb-6">
                  User Contributions must in their entirety comply with all
                  applicable federal, state, local, and international laws and
                  regulations. User Contributions must not:
                </p>
                <div className="grid grid-cols-1 gap-4">
                  <div className="border-l-4 border-orange-300 bg-orange-50 p-4 rounded-r-lg">
                    <p className="text-gray-700">
                      <span className="font-semibold text-orange-600">⚠️</span> Defamatory, obscene, abusive, offensive, harassing, violent, or inflammatory material
                    </p>
                  </div>
                  <div className="border-l-4 border-orange-300 bg-orange-50 p-4 rounded-r-lg">
                    <p className="text-gray-700">
                      <span className="font-semibold text-orange-600">⚠️</span> Sexually explicit content, violence, or discrimination
                    </p>
                  </div>
                  <div className="border-l-4 border-orange-300 bg-orange-50 p-4 rounded-r-lg">
                    <p className="text-gray-700">
                      <span className="font-semibold text-orange-600">⚠️</span> Infringe intellectual property rights of others
                    </p>
                  </div>
                  <div className="border-l-4 border-orange-300 bg-orange-50 p-4 rounded-r-lg">
                    <p className="text-gray-700">
                      <span className="font-semibold text-orange-600">⚠️</span> Violate legal rights or give rise to civil or criminal liability
                    </p>
                  </div>
                  <div className="border-l-4 border-orange-300 bg-orange-50 p-4 rounded-r-lg">
                    <p className="text-gray-700">
                      <span className="font-semibold text-orange-600">⚠️</span> Likely to deceive any person
                    </p>
                  </div>
                  <div className="border-l-4 border-orange-300 bg-orange-50 p-4 rounded-r-lg">
                    <p className="text-gray-700">
                      <span className="font-semibold text-orange-600">⚠️</span> Promote illegal activity or unlawful acts
                    </p>
                  </div>
                </div>
              </section>

              <section className="pt-6">
                <h2 className="text-2xl font-bold text-[#0e4c92] mb-6 pb-2 border-b border-gray-200">6. Disclaimer of Warranties</h2>
                <div className="bg-yellow-50 border border-yellow-200 p-6 rounded-lg">
                  <p className="text-gray-700 leading-relaxed font-medium">
                    THE SITE IS PROVIDED ON AN "AS IS" AND "AS AVAILABLE" BASIS,
                    WITHOUT ANY WARRANTIES OF ANY KIND, EITHER EXPRESS OR IMPLIED.
                    NEITHER MEDSELECTHUB NOR ANY PERSON ASSOCIATED WITH MEDSELECTHUB
                    MAKES ANY WARRANTY OR REPRESENTATION WITH RESPECT TO THE
                    COMPLETENESS, SECURITY, RELIABILITY, QUALITY, ACCURACY, OR
                    AVAILABILITY OF THE SITE.
                  </p>
                </div>
              </section>

              <section className="pt-6">
                <h2 className="text-2xl font-bold text-[#0e4c92] mb-6 pb-2 border-b border-gray-200">7. Limitation of Liability</h2>
                <div className="bg-red-50 border border-red-200 p-6 rounded-lg">
                  <p className="text-gray-700 leading-relaxed font-medium">
                    IN NO EVENT WILL MEDSELECTHUB, ITS AFFILIATES, OR THEIR LICENSORS,
                    SERVICE PROVIDERS, EMPLOYEES, AGENTS, OFFICERS, OR DIRECTORS BE
                    LIABLE FOR DAMAGES OF ANY KIND, UNDER ANY LEGAL THEORY, ARISING
                    OUT OF OR IN CONNECTION WITH YOUR USE, OR INABILITY TO USE, THE
                    SITE, ANY WEBSITES LINKED TO IT, ANY CONTENT ON THE SITE OR SUCH
                    OTHER WEBSITES, INCLUDING ANY DIRECT, INDIRECT, SPECIAL,
                    INCIDENTAL, CONSEQUENTIAL, OR PUNITIVE DAMAGES.
                  </p>
                </div>
              </section>

              <section className="pt-6">
                <h2 className="text-2xl font-bold text-[#0e4c92] mb-6 pb-2 border-b border-gray-200">8. Changes to the Terms of Service</h2>
                <div className="bg-gray-50 p-6 rounded-lg space-y-4">
                  <p className="text-gray-700 leading-relaxed">
                    We may revise and update these Terms from time to time in our sole
                    discretion. All changes are effective immediately when we post
                    them, and apply to all access to and use of the Site thereafter.
                  </p>
                  <p className="text-gray-700 leading-relaxed">
                    Your continued use of the Site following the posting of revised
                    Terms means that you accept and agree to the changes.
                  </p>
                </div>
              </section>

              <section className="pt-6">
                <h2 className="text-2xl font-bold text-[#0e4c92] mb-6 pb-2 border-b border-gray-200">9. Governing Law and Jurisdiction</h2>
                <div className="bg-blue-50 border border-blue-200 p-6 rounded-lg">
                  <p className="text-gray-700 leading-relaxed">
                    These Terms and any dispute or claim arising out of or in
                    connection with them or their subject matter or formation shall be
                    governed by and construed in accordance with the laws of the
                    United States of America and the State of [Your State], without
                    giving effect to any choice or conflict of law provision or rule.
                  </p>
                </div>
              </section>

              <section className="pt-6">
                <h2 className="text-2xl font-bold text-[#0e4c92] mb-6 pb-2 border-b border-gray-200">10. Contact Information</h2>
                <div className="bg-[#0e4c92] text-white p-6 rounded-lg">
                  <p className="mb-4 leading-relaxed">
                    Questions or comments about the Site or these Terms may be
                    directed to us at:
                  </p>
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div className="flex items-center">
                      <span className="w-2 h-2 bg-white rounded-full mr-3"></span>
                      <span>legal@medselecthub.com</span>
                    </div>
                    <div className="flex items-center">
                      <span className="w-2 h-2 bg-white rounded-full mr-3"></span>
                      <span>+1 (555) 123-4567</span>
                    </div>
                    <div className="flex items-center">
                      <span className="w-2 h-2 bg-white rounded-full mr-3"></span>
                      <span>123 Health Ave, Suite 101</span>
                    </div>
                  </div>
                </div>
              </section>
            </div>
          </div>
        </div>
      </main>
      <Footer />
    </div>
  );
};